<template>
  <el-dialog
    :model-value="visible"
    width="700px"
    top="8vh"
    :show-close="true"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    class="expert-comment-dialog"
    destroy-on-close
    @update:modelValue="handleDialogUpdate"
  >
    <template #header>
      <div class="font-bold text-lg">全部评论 ({{ total }})</div>
    </template>
    <div class="comment-scroll-area" ref="scrollArea" @scroll="onScroll">
      <template v-if="comments.length">
        <ExpertCommentPanel
          :comments="comments"
          :user-avatar="userAvatar"
          :show-all="false"
          @like-comment="c => emit('onLikeComment', c)"
          @like-reply="p => emit('onLikeReply', p)"
          @reply-comment="c => emit('onReplyComment', c)"
          @reply-reply="p => emit('onReplyReply', p)"
          @open-reply-dialog="handleOpenReplyDialog"
        />
      </template>
      <template v-else-if="loading">
        <div class="py-6">
          <div v-for="i in 4" :key="i" class="skeleton-comment mb-4"></div>
        </div>
      </template>
      <div v-if="loading && comments.length" class="text-center py-2 text-slate-400">加载中...</div>
      <div v-if="finished && comments.length" class="text-center py-2 text-slate-400">没有更多评论了</div>
      <div v-if="!loading && !comments.length" class="text-center py-8 text-slate-400">暂无评论内容</div>
    </div>
    <template #footer>
      <ExpertCommentInput
        v-model="commentInput"
        :user-avatar="userAvatar"
        :loading="inputLoading"
        @submit="submitComment"
      />
    </template>
  </el-dialog>
  <ExpertReplyDialog
      :visible="replyDialogVisible"
      :comment="replyDialogComment"
      :replies="replyDialogReplies"
      @close="replyDialogVisible = false"
    />
</template>
<script setup>
import { ref, watch, nextTick } from 'vue'
import ExpertCommentPanel from './ExpertCommentPanel.vue'
import ExpertCommentInput from './ExpertCommentInput.vue'
import ExpertReplyDialog from '@/components/ExpertReplyDialog.vue'

const props = defineProps({
  visible: Boolean,
  userAvatar: String,
  fetchComments: Function, // (page, pageSize) => Promise<{list, total}>
  pageSize: { type: Number, default: 20 }
})
const emit = defineEmits(['onClose', 'onLikeComment', 'onLikeReply', 'onReplyComment', 'onReplyReply'])
const comments = ref([])
const total = ref(0)
const page = ref(1)
const loading = ref(false)
const finished = ref(false)
const scrollArea = ref(null)
const commentInput = ref('')
const inputLoading = ref(false)

function handleDialogUpdate(val) {
  if (!val) emit('onClose')
}

async function loadComments(reset = false) {
  if (loading.value || finished.value) return
  loading.value = true
  const res = await props.fetchComments(page.value, props.pageSize)
  if (reset) {
    comments.value = res.list
  } else {
    comments.value = comments.value.concat(res.list)
  }
  total.value = res.total
  if (comments.value.length >= res.total) finished.value = true
  loading.value = false
}
watch(() => props.visible, v => {
  if (v) {
    page.value = 1
    finished.value = false
    loadComments(true)
    nextTick(() => {
      if (scrollArea.value) scrollArea.value.scrollTop = 0
    })
  }
})
function onScroll() {
  const el = scrollArea.value
  if (!el || loading.value || finished.value) return
  if (el.scrollTop + el.clientHeight >= el.scrollHeight - 40) {
    page.value += 1
    loadComments()
  }
}
async function submitComment(val) {
  if (!val.trim()) return
  inputLoading.value = true
  await emit('onReplyComment', val)
  commentInput.value = ''
  inputLoading.value = false
}

const replyDialogVisible = ref(false)
const replyDialogReplies = ref([])
const replyDialogComment = ref(null)
function handleOpenReplyDialog(comment, fetchReplies) {
  replyDialogComment.value = comment
  replyDialogReplies.value = comment.replies
  replyDialogVisible.value = true
}
</script>
<style scoped>
.expert-comment-dialog .el-dialog {
  border-radius: 1.5rem;
  box-shadow: 0 8px 40px 0 rgba(56,112,255,0.18);
}
.expert-comment-dialog .el-dialog__header {
  position: sticky;
  top: 0;
  background: #fafdff;
  z-index: 2;
  border-radius: 1.5rem 1.5rem 0 0;
}
.comment-scroll-area {
  max-height: 60vh;
  min-height: 200px;
  overflow-y: auto;
  background: #fafdff;
  border-radius: 0 0 1.5rem 1.5rem;
  padding: 0 24px 24px 24px;
}
.skeleton-comment {
  height: 56px;
  background: linear-gradient(90deg, #f3f6fa 25%, #e9eef5 37%, #f3f6fa 63%);
  border-radius: 1rem;
  animation: skeleton-loading 1.2s infinite linear;
}
@keyframes skeleton-loading {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
</style> 